<template>
    <div class="wrapper">
        <v-head></v-head>
        <section>
            <div style="margin-bottom:5px;">
                <el-input placeholder="请输入内容" size="small" v-model="searchKey" style="width: 250px;">
                    <el-button slot="append" size="small" icon="el-icon-search" @click="getDataList"></el-button>
                </el-input>
                <el-button type="primary" size="small" @click="openAddDialog()">新 建</el-button>
            </div>
            <el-table ref="multipleTable" :data="dataList" border tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" label="序号">
                </el-table-column>
                <el-table-column prop="projectCode" label="工程编码">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="loginAddress" label="登陆地址">
                </el-table-column>


                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button-group>

                            <el-button size="mini" type="primary" @click="viewDialog(scope.row)">进入</el-button>

                            <el-button size="mini" type="primary" @click="openDialog(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="removeItem(scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;background: rgb(239, 242, 247);border: 1px solid #E5E9F2;">
                <el-pagination style="line-height: 30px; height: 30px;" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" :current-page="currentPage"
                               :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>


        </section>
        <div v-if="dialogFormVisibleAdd">
            <el-dialog :title="dialogAddOrEdit" :visible="dialogFormVisibleAdd" :modal="dialogFormVisibleAdd"
                       :before-close="openAddDialogClose" 　 customClass="customWidth"  >

                <gateway_auth_project :authProjectCode="projectCode"></gateway_auth_project>
            </el-dialog>
        </div>
    </div>

</template>
<style>

</style>
<script>
    import {AjaxByAll} from '@/api/api';
    import vHead from '@/components/common/Header.vue';
    import gateway_auth_project from '@/views/gateway/project/gateway_project.vue';

    export default {
        data() {

            return {
                dataList: [],
                multipleSelection: [],
                dialogFormVisibleAdd: false,
                labelPosition: 'left',
                projectCode: null,
                formAdd: {},

                pageSize: 10,
                currentPage: 1,
                total: 0,
                dialogAddOrEdit: '',
                searchKey: null, defaultData: null,
                formAddRules: {}
            }
        },

        methods: {
            openAddDialogClose() {
                this.dialogFormVisibleAdd = false;
            },
            openAddDialog() {
                this.dialogAddOrEdit = '新建网关工程';
                this.dialogFormVisibleAdd = true;
                this.projectCode = '';
            },
            openDialog(model) {

                if (model) {
                    this.dialogAddOrEdit = '编辑网关工程';
                    this.projectCode = model.projectCode;
                    this.dialogFormVisibleAdd = true;
                }

            },
            viewDialog(row) {
                this.$router.push({
                    path: '/dashboard?projectCode=' + row.projectCode
                });
            },
            getDataList() {
                let self = this;
                let form = {
                    currentPage: self.currentPage,
                    pageSize: self.pageSize,
                    keyword: self.searchKey,
                };
                let urls = 'gateway/project/query';
                AjaxByAll('post', urls, form).then(data => {
                    if (data.code === 200) {

                        self.total = data.data.total * 1;
                        self.dataList = data.data.records;
                    }

                    this.loading = false;
                });
            },

            removeItem(model) {
                this.$confirm('确认移除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    AjaxByAll('delete', 'gateway/project/' + model.id, null).then(data => {
                        if (data.code === 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            this.getDataList();
                        } else {
                            this.$message({
                                message: '操作失败：' + data.msg,
                                type: 'error'
                            });
                        }

                    });
                }).catch(() => {

                });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                //  console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getDataList();
            }
        },
        created() {


        },
        mounted: function () {
            this.getDataList();

        }, components: {
            vHead, gateway_auth_project
        },
    }
</script>
<style>
    .customWidth{
        width:60%;
    }
</style>
